<template>
  <div class="home">
    <div class="scroll-container" ref="scrollContainer">
      <div ref="scroll1" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>1</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll2" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>2</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll3" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>3</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll4" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>4</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll5" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>4</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll6" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>5</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll7" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>6</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
      <div ref="scroll7" class="scroll-list">
        <div class="img">
          <img :src="listData.length > 0 && listData[0].uri" alt="">
        </div>
        <div class="message">
          <h1>6</h1>
          <span>{{listData.length > 0 && listData[0].message}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import message from '../../../public/data/message.json';
import imgs from '../../../public/data/imgs.json'
function getItem() {
  const index = Math.floor(Math.random() * imgs.length);
  return {...imgs[index],message: message[index]}
}
export default {
  name: "Home",
  data(){
    return {
      listData: [],
      io: null,
    }
  },
  methods:{
    fetch(count) {
      count = count || 20;
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          if (++this.pageNum > 30) {
            resolve(false)
          } else {
            let items = []
            for (let i = 0; i < count; i++) {
              items[i] = {id: i + 1,...getItem(),}
            }
            resolve(items)
          }
        }, 500)
      })
    },
    // 交叉情况变化处理函数
    intersectionHandler(entries) {

      // entries.boundingClientRect.y <
    },
  },
  components: {},
  created() {
    this.fetch().then((res) => {
      this.listData = [...res];
    })
  },
  mounted() {
    this.io = new window.IntersectionObserver(this.intersectionHandler, {
      rootMargin: '0px 0px 300px 0px',
      root: this.$refs.scrollContainer,
      threshold: 0.01,
    })
    const arr = [this.$refs.scroll1,this.$refs.scroll2,this.$refs.scroll3,this.$refs.scroll4]
    arr.forEach((item,index) => {
      this.io.observe(item)
    })
  }
}
</script>

<style scoped lang="less">
  @import "./Home.less";
</style>
